<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../assets/css/layui.css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <title></title>
</head>
<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-row layui-col-space20">
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>流量剩余</span>
                                </div>
                                <div class="total" id="flow"></div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                                
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <span>已使用</span>
                                <span id="sFlow"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>通话剩余时常</span>
                                </div>
                                <div class="total"id="phonenumber"></div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                                
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <span>已使用</span>
                                <span id="Sphonenumber"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>剩余短信条数</span>
                                </div>
                                <div class="total" id="shortmessage"></div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                               
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <span>已使用</span>
                                <span id="Sshortmessage"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>余额</span>
                                </div>
                                <div class="total" id="money"></div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                                
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-card">
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">账单查询</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <table id="demo" lay-filter="test"></table>
                            </div>
                            <div class="layui-tab-item">
                                ddd
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../assets/layui.all.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
     layui.use(['table','element'], function(data) {
         var element = layui.element;
         var table=layui.table;
         /*var $=layui.jquery;*/
         $.post("http://localhost:9999/hzx", {}, function (data) {
             console.log(data.data.tabHallUserpackage);
             $("#flow").html(data.data.tabHallUserpackage.flow);
             $("#phonenumber").html(data.data.tabHallUserpackage.conversationtime);
             $("#shortmessage").html(data.data.tabHallUserpackage.message);
             $("#money").html(data.data.tabHallUserpackage.money);
         })

         $.post("http://localhost:9999/hzx", {}, function (data) {
             console.log(data);
             $("#sFlow").html(data.data.flow);
             $("#Sphonenumber").html(data.data.conversationtime);
             $("#Sshortmessage").html(data.data.message);
             $("#Smoney").html(data.data.money);
         })

         //分页
         /*table.render({
             elem: '#demo'
             , height: 312
             , url: 'http://localhost:9999//hzx/get/13874702983'
             , page: true
             , limit: [3, 5, 18]
             , cols: [[
                 {title: 'ID', filed: 'id', width: '135'},
                 {title: '缴费类型', filed: 'deduction', width: '135'},
                 {title: '操作时间', filed: 'operationtime', width: '135'},
                 {title: '操作', filed: 'operation', width: '135'},
                 {title: '号码关联', filed: 'pnumber', width: '135'}
             ]]

         })*/


         //创建表格参数
         var obj = {
             elem: '#demo'  //id选择器
             ,url: 'http://localhost:9999//hzx/get'   //数据接口,某个Controller
             ,dataType: JSON
             ,page: true //开启分页
             ,limit: 5  //每页显示多少条
             ,cols: [[ //表头
                 {type:'checkbox',title:'选择'}
                 ,{field: 'id', title: 'ID', sort: true}
                 ,{field: 'deduction', title: '缴费类型'}
                 ,{field: 'operationtime', title: '操作时间'}
                 ,{field: 'operation', title: '操作'}
                 ,{field: 'pnumber', title: '号码关联'}
             ]]
         } ;
         //加载表格
         table.render(obj);

     });
    </script>
</body>
</html>